<template>
  <div>
    <card>
      <div style="width: 95%; margin: 0 auto" class="conner_box">
        <div style="float: left; width: 30%">
          <span style="margin-right: 20px">手机号码</span>
          <div style="display: inline-block">
            <el-input placeholder="请输入手机号码" v-model="phone" clearable>
            </el-input>
          </div>
        </div>
        <div style="float: left; width: 30%">
          <span style="margin-right: 20px">标题</span>
          <div style="display: inline-block">
            <el-input placeholder="请输入文章标题" v-model="title" clearable>
            </el-input>
          </div>
        </div>
        <div style="float: left; width: 30%">
          <span style="margin-right: 20px"> 话题</span>
          <div style="display: inline-block">
            <el-select
              v-model="conversation"
              placeholder=" 请选择"
              @change="stationchange"
            >
              <el-option
                v-for="item in conversationlist"
                :key="item.communitytopic_id"
                :label="item.communitytopic_topic"
                :value="item.communitytopic_id"
              >
                <!-- <span>{{item.communitytopic_topic}}</span> 
              
              <button-cn  text="修改" @myclick="query" style="display: inline-block; margin-left: ;"></button-cn> -->
              </el-option>
            </el-select>
          </div>
        </div>
        <div style="float: left; width: 30%; margin-top: 30px">
          <span style="margin-right: 20px"> 发布开始时间</span>
          <div style="display: inline-block">
            <el-date-picker
              v-model="Releasetime"
              type="datetime"
              placeholder="    请选择"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              prefix-icon=""
            >
            </el-date-picker>
          </div>
        </div>
        <div
          style="
            float: left;
            display: inline-block;
            margin-top: 30px;
            width: 30%;
          "
        >
          <span style="margin-right: 20px"> 发布结束时间</span>
          <div style="display: inline-block">
            <el-date-picker
              v-model="Overtime"
              type="datetime"
              placeholder="    请选择"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              prefix-icon=""
            >
            </el-date-picker>
          </div>
        </div>
        <div style="float: left; margin-top: 30px; width: 30%">
          <span style="margin-right: 20px">文章状态</span>
          <div style="display: inline-block">
            <el-select
              v-model="state"
              placeholder=" 请选择"
              @change="stationchangeor"
            >
              <el-option
                v-for="item in textsattekist"
                :key="item.id"
                :label="item.text"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- <div style="float: left; margin-top: 2%; display: inline-block"></div> -->
        <div style="float: right; margin-top: 50px">
          <div style="display: inline-block; margin-right: 20px">
            <button-cn text="查询" @myclick="query"></button-cn>
          </div>
          <div style="display: inline-block">
            <button-cn text="重置" @myclick="resetbtn"></button-cn>
          </div>
        </div>
      </div>
    </card>
    <div class="itemList">
      <span>笔记管理</span>
      <div style="float: right; margin-left: 10px">
        <button-cn text="发布" iconShow @myclick="release"></button-cn>
      </div>
      <div style="float: right">
        <!-- <button-cn
          text="新增话题"
          iconShow
          @myclick="pushconversation"
        ></button-cn> -->
        <div class="zhanwei_box" v-show="excelData.length > 0">
          <download-excel
            class="export-excel-wrapper"
            :data="excelData"
            :fields="json_fields"
            :header="title"
            name="笔记数据.xls"
          >
            <ButtonCn text="导出Excel" class="export"></ButtonCn>
          </download-excel>
        </div>
        <div class="zhanwei_box" v-show="excelData.length == 0">
          <ButtonCn
            text="导出Excel"
            class="export"
            @myclick="myexportBtm"
          ></ButtonCn>
        </div>
      </div>
    </div>

    <card>
      <el-table :data="tableData" style="width: 100%"
      @select="checketou"
        @select-all="checketou"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column label="头像" align="center">
          <template slot-scope="scope">
            <img
              :src="
                scope.row.authorhavatarUrl ||
                'http://management.api.asmm.vip./upload/sContentimg/20221117170304748.png'
              "
              alt=""
              class="imgvideo"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="community_authorname"
          label="昵称"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.authorname ? scope.row.authorname : "爱氏妈妈"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userMobile" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="community_title" label="标题" align="center">
        </el-table-column>
        <el-table-column label="文案" align="center">
          <template slot-scope="scope">
            <div class="overtext">
              {{ scope.row.community_count }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="community_imgurl" label="缩略图" align="center">
          <template slot-scope="scope">
            <img
              :src="scope.row.community_imgurl[0]"
              class="imgvideo"
              v-if="scope.row.community_articletype == 1"
            />
            <video
              class="imgvideo"
              :src="scope.row.community_imgurl[0]"
              v-if="scope.row.community_articletype == 2"
            ></video>
          </template>
        </el-table-column>
        <el-table-column prop="topic" label="话题" align="center">
          <template slot-scope="scope">
            <div class="overtext">
              {{ scope.row.topic }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="community_state" label="状态" align="center">
          <!-- 1：显示 2：删除 3.待审核 4驳回 -->
          <template slot-scope="scope">
            <div>
              {{ textstatemethods(scope.row.community_state) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="community_createtime"
          label="发布时间"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="community_likenum" label="点赞数" align="center">
        </el-table-column>
        <el-table-column prop=" " label="文章类型" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.community_articletype == 1">图文</div>
            <div v-else>视频</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <!-- slot-scope="scope.row" -->
          <template slot-scope="scope" style="width: 100%; text-align: center">
            <div>
              <button-cn
                text="详情"
                @myclick="Detailsmethod(scope.row.community_id)"
                style="display: inline-block"
              ></button-cn>

              <el-button
                type="primary"
                @click="ciclksort(scope.row.community_id)"
                style="display: inline-block; border-radius: 10px"
                v-show="scope.row.community_sort != 1"
                >置顶</el-button
              >
              <button-cn
                text="取消"
                @myclick="cancelArticleSort(scope.row.community_id)"
                style="display: inline-block"
                v-show="scope.row.community_sort == 1"
              ></button-cn>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="count"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <alert-cn
      :alertShow="isShowdetails"
      title="发布"
      rightText="确认"
      leftText="取消"
      @confirm="editSubmint"
      @cancel="detailshide"
      @clone="isShowdetails = false"
    >
      <el-form :model="Copywritingobj" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model.trim="Copywritingobj.title"></el-input>
        </el-form-item>
        <el-form-item label="文案">
          <el-input
            v-model="Copywritingobj.Copywritingtext"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Community/imgurl"
            @imgsucc="imagelist"
            ref="imgupload"
          ></imgUpload>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="Copywritingobj.nickname"></el-input>
        </el-form-item>
        <el-form-item label="话题">
          <el-select
            v-model="Copywritingobj.PostTopictext"
            placeholder=" 请选择"
            @change="selsectchange"
          >
            <el-option
              v-for="item in Posttopic"
              :key="item.communitytopic_id"
              :label="item.communitytopic_topic"
              :value="item.communitytopic_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="点赞数">
          <el-input v-model="Copywritingobj.starts"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <img :src="adimg" alt="" style="width: 100px" />
          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Community/imgurl"
            @imgsucc="imgsucc"
            ref="imgupload"
          ></imgUpload>
        </el-form-item>
      </el-form>
    </alert-cn>
    <alert-cn
      :alertShow="sortAlert"
      title="发布"
      rightText="确认"
      leftText="取消"
      @confirm="sortmethods"
      @cancel="sortAlert = false"
      @clone="sortAlert = false"
    >
    </alert-cn>
    <alert-cn
      :alertShow="pushconversationalert"
      title="添加话题"
      rightText="确认"
      leftText="取消"
      @confirm="addtopic"
      @cancel="pushconversationalert = false"
      @clone="pushconversationalert = false"
    >
      <el-form :model="addtopicobj" label-width="140px">
        <el-form-item label="标题">
          <el-input v-model.trim="addtopicobj.topic"></el-input>
        </el-form-item>
        <el-form-item label="bananer图">
          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Communitytopic/topicbannerimgurl"
            @imgsucc="topicbannerimgurl"
            ref="imgupload"
          ></imgUpload>
        </el-form-item>
        <el-form-item label="列表图">
          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Communitytopic/topiclistimgurl"
            @imgsucc="topiclistimgurl"
            ref="imgupload"
          ></imgUpload>
        </el-form-item>
        <el-form-item label="详情页图片">
          <imgUpload
            imgurl="http://management.api.asmm.vip/index.php/Communitytopic/topicdetailsimgurl"
            @imgsucc="topicdetailsimgurl"
            ref="imgupload"
          ></imgUpload>
        </el-form-item>
        <el-form-item label="标题">
          <el-input
            v-model.trim="addtopicobj.explain"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="海报图">
          <imgUpload
            imgurl="https://m.asmm.vip/index.php/index/Community/uploadming"
            @imgsucc="uploadming"
            ref="imgupload"
          ></imgUpload>
        </el-form-item>
      </el-form>
    </alert-cn>
    <alert-cn
      :alertShow="ArticleDetailsstate"
      title="文章详情"
      rightText="通过"
      leftText="驳回"
      @confirm="ArticleDetails(detailsobject.community_id)"
      @cancel="ArticleDetailscancel(detailsobject.community_id)"
      @clone="ArticleDetailsstate = false"
    >
      <el-form label-width="120px">
        <el-form-item label="	标题">
          {{ detailsobject.community_title }}
        </el-form-item>
        <el-form-item label="	正文内容">
          {{ detailsobject.community_count }}
        </el-form-item>

        <el-form-item label="	社区笔记表id">
          {{ detailsobject.community_id }}
        </el-form-item>
        <el-form-item label="	话题表id">
          {{ detailsobject.community_topicid }}
        </el-form-item>
        <el-form-item label="	点赞总数">
          {{ detailsobject.community_likenum }}
        </el-form-item>
        <el-form-item label="	作者昵称">
          {{ detailsobject.authorname }}
        </el-form-item>
        <el-form-item label="	作者头像">
          <img
            :src="detailsobject.authorhavatarUrl"
            alt=""
            style="width: 50px"
          />
        </el-form-item>
        <el-form-item label="	图片or 视频">
          <div
            v-for="(item, index) of detailsobject.community_imgurl"
            :key="index"
            style="display: inline-block"
          >
            <img
              :src="item"
              alt=""
              style="width: 100px; display: inline-block"
              v-if="detailsobject.community_articletype == 1"
            />
            <video
              :key="index"
              :src="item"
              alt=""
              style="display: inline-block"
              v-else
              controls
            />
          </div>
        </el-form-item>

        <el-form-item label="	笔记发布时间">
          {{ detailsobject.community_createtime }}
        </el-form-item>
        <el-form-item label="	文章类型">
          <span v-if="detailsobject.community_articletype == 1">普通图文</span>
          <span v-else> 视频</span>
        </el-form-item>
        <el-form-item label="话题">
          {{ detailsobject.topic }}
        </el-form-item>
      </el-form>
    </alert-cn>
    <!-- <alert-cn
      :alertShow="sortalert"
      title="文章排序"
      rightText="确认"
      leftText="取消"
      @confirm="sortalertmethods"
      @cancel="sortalert = false"
      @clone="sortalert = false"
    >
      <el-input v-model="sortindex" placeholder="文章排序，数字"></el-input>
    </alert-cn> -->
  </div>
</template>


<script>
import {
  addCommunity,
  gettopiclist,
  gettextlist,
  notedetails,
  setArticleSort,
  addtopic,
  articleReview,
  cancelArticleSort,
} from "../../request/index";

import card from "../../components/from/card.vue";
import ButtonCn from "../../components/from/button-cn.vue";
import imgUpload from "../../components/from/imgupload.vue";
// import newimgupload from "../../components/from/newimgupload.vue";
import alertCn from "../../components/from/alert-cn.vue";
export default {
  // components: { card },
  data() {
    return {
      excelData:[],
      radio_state: 1,
      sortID: null,
      sortindex: null,
      sortalert: false,
      detailsobject: {},
      ArticleDetailsstate: false,
      addtopicobj: {
        // ,,,,,,,,,,,,,
        topic: "",
        bannerimg: "",
        topiclistimg: "",
        topicdetailsimg: "",
        explain: "",
        posters: "",
      },
      adimg:
        "	http://management.api.asmm.vip./upload/sContentimg/20221117170304748.png",

      Copywritingobj: {
        title: null,
        imagelist: null,
        Copywritingtext: null,
        PostTopictext: null,
        starts: 100,
        nickname: "爱氏妈妈",
        isnowimg: null,
      },
      isShowdetails: false,
      pushconversationalert: false,
      count: 10,
      page: 1,
      total: 0,
      phone: "",
      state: 1,
      textsattekist: [
        {
          id: 1,
          text: "显示",
        },
        {
          id: 3,
          text: "待审核",
        },
        {
          id: 4,
          text: "驳回",
        },
      ],
      title: "",
      conversation: "",
      Posttopic: [],
      conversationlist: [
        {
          value: 1,
          label: "显示",
        },
        {
          value: 2,
          label: "下线",
        },
      ],
      Releasetime: "",
      Overtime: "",
      endtime: "",
      category: "图文",
      categoryoption: [
        {
          value: 1,
          label: "图文",
        },
        {
          value: 2,
          label: "视频",
        },
      ],
      Statusfiltering: [
        {
          value: 1,
          label: "图文",
        },
        {
          value: 2,
          label: "视频",
        },
      ],
      nametiods: null,
      tableData: [],
      sortAlert: false,
      json_fields: {
        昵称: "community_authorname",
        手机号: "userMobile",
        话题名: "topic",
        笔记标题: "community_title",
        发布时间: "community_createtime",
        点赞总数: "community_likenum",
      },
    };
  },
  created() {
    this.topiclistmethods();
    this.gettextmethods();
  },
  methods: {
    myexportBtm() {
      this.$message.error("请选择要导出的数据");
    },
    checketou(vm) {
      this.excelData = vm;
      console.log(this.excelData);
    },
    async ArticleDetailscancel(id) {
      this.radio_state = 4;
      const res = await articleReview(id, this.radio_state);
      // console.log(res);
      if (res.code != "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.ArticleDetailsstate = false;
      this.radio_state = 1;
      this.topiclistmethods();
      this.gettextmethods();
    },
    detailshide() {
      this.isShowdetails = false;
      // this.$refs.imgupload._data.imgdata = []
      // this.$refs.imgupload.clearimg();

      // console.log( this.$refs.imgupload);
      // location.reload()
    },
    textstatemethods(text) {
      if (text == 1) {
        return "显示";
      } else if (text == 2) {
        return "删除";
      } else if (text == 3) {
        return "待审核";
      } else {
        return "驳回";
      }
    },

    resetbtn() {
      (this.page = 1),
        (this.count = 10),
        (this.title = ""),
        (this.conversation = ""),
        (this.state = 1),
        (this.Releasetime = ""),
        (this.Overtim = null);
      this.phone = null;
    },
    topicbannerimgurl(url) {
      //  console.log(url);
      this.addtopicobj.bannerimg = url[0];
    },
    topiclistimgurl(url) {
      this.addtopicobj.topiclistimg = url[0];
    },
    topicdetailsimgurl(url) {
      this.addtopicobj.topicdetailsimg = url[0];
    },
    uploadming(url) {
      this.addtopicobj.posters = url[0];
    },
    async sortalertmethods() {
      const res = await setArticleSort(this.sortID, 1);

      // console.log(res);
      if (res.code !== "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.gettextmethods();
      this.sortalert = false;
    },
    async ArticleDetails(id) {
      this.radio_state = 1;
      const res = await articleReview(
        id == undefined ? this.nametiods : id,
        this.radio_state
      );
      // console.log(res);
      if (res.code != "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.ArticleDetailsstate = false;
      this.radio_state = 1;
      this.topiclistmethods();
      this.gettextmethods();
    },
    async addtopic() {
 
      var item = this.addtopicobj;
      const res = await addtopic(
        item.topic,
        item.bannerimg,
        item.topiclistimg,
        item.topicdetailsimg,
        item.explain,
        item.posters
      );

      if (res.code !== "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      // window.on
      location.reload();
    },
    pushconversation() {
      this.pushconversationalert = true;
    },
    sortmethods() {
      // this.sortAlert = true;
      console.log(2222);
    },
    async ciclksort(scope) {
      // console.log(id);
      // this.sortID = scope;
      const res = await setArticleSort(scope, 1);

      // console.log(res);
      if (res.code !== "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.gettextmethods();
      cancelArticleSort;
      this.sortalert = false;
    },
    async cancelArticleSort(scope) {
      const res = await cancelArticleSort(scope);

      // console.log(res);
      if (res.code !== "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.gettextmethods();
      this.sortalert = false;
    },
    async Detailsmethod(id) {
      this.nametiods = id;
      const res = await notedetails(id);

      console.log(res);
      if (res.code !== "0000") return this.$message.error(res.msg);
      this.ArticleDetailsstate = true;
      if (res.data.length < 1) return this.$message.error("空数据");
      this.detailsobject = res.data[0];
      console.log(this.detailsobject);
    },
    async gettextmethods() {
      const res = await gettextlist(
        this.page,
        this.count,
        this.title,
        this.conversation,
        this.state,
        this.Releasetime,
        this.Overtime,
        this.phone
      );
      // console.log(res);
      if (res.code !== "0000") return this.$message.error(res.msg);
      console.log(res);
      this.tableData = res.data.data;
      this.total = res.data.total;
    },

    stationchangeor(id) {
      this.state = id;
    },
    selsectchange(id) {
      // console.log(id);
      this.Copywritingobj.PostTopictext = id;
    },
    stationchange(id) {
      this.conversation = id;
    },
    async topiclistmethods() {
      const res = await gettopiclist();
      // console.log(res);
      if (res.code !== "0000") return this.$message.error(res.msg);
      this.conversationlist = res.data;
      console.log(res.data, 2222);
      this.Posttopic = res.data;
    },
    imgsucc(ref) {
      // console.log(ref);
      this.Copywritingobj.isnowimg = ref[0];
    },
    imagelist(imgs) {
      this.Copywritingobj.imagelist = String(imgs);
      console.log(this.Copywritingobj.imagelist);
    },
    confirm() {},
    async editSubmint() {
      if (this.Copywritingobj.title == "")
        return this.$message.error("标题不能为空");
      var item = this.Copywritingobj;
      const res = await addCommunity(
        item.title,
        item.imagelist,
        item.Copywritingtext,
        item.PostTopictext,
        item.starts,
        item.nickname,
        item.isnowimg
      );
      // console.log(res);
      if (res.code !== "0000") return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.isShowdetails = false;
      this.gettextmethods();
      for (var item in this.Copywritingobj) {
        item = "";
      }
    },
    query() {
      this.topiclistmethods();
      this.gettextmethods();
    },
    Reset(scope) {},
    release() {
      this.isShowdetails = true;
    },
    handleSizeChange(num) {
      // console.log(num);
      this.count = num;
      this.gettextmethods();
    },
    handleCurrentChange(num) {
      this.page = num;
      this.gettextmethods();
    },
  },

  
  components: {
    card,
    ButtonCn,
    alertCn,
    imgUpload,
    // newimgupload,
  },
};
</script>

<style lang="scss" scoped>
@import "../../components/style/init_el_checkout.scss";
.conner_box ::v-deep .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 170px;
}
.conner_box ::v-deep .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 32px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.itemList {
  width: 95%;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
  box-sizing: border-box;
  // margin-right: 30px;
  box-sizing: border-box;
}

.edit {
  // color: #e04e2f;
  margin-right: 10px;
  cursor: pointer;
}

.topping1 {
  cursor: pointer;
}

.topping {
  cursor: pointer;
  //  color: #eee;
  color: #e04e2f;
}
.imgbox {
  width: 100px;
}

.itemList {
  width: 95%;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
  box-sizing: border-box;
  box-sizing: border-box;
}
.overtext {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
::v-deep .el-card__body .cell .imgvideo {
  width: 100% !important;
  // height: 120px !important;
}
::v-deep .el-button--primary {
  border-radius: 10rpx !important;
}
</style>